<template>
  <div style="width: 100%; height: auto;">
    <!-- ----------轮播----------- -->
    <div id="app">
      <el-carousel :interval="5000" arrow="always">
        <el-carousel-item v-for="(img, index) in imgList" :key="index">
          <img style="width: 99%" :src="img.url" />
        </el-carousel-item>
      </el-carousel>
    </div>

    <div style="height: auto">
      <p
        style="
          text-align: left;
          font-size: 36px;
          font-weight: bold;
          padding-left: 10px;
        "
      >
        必看好房
      </p>
      <p
        style="
          font-size: 18px;
          color: gray;
          margin-top: -30px;
          padding-left: 10px;
        "
      >
        青春躁动，好房出众
      </p>
      <br />
      <!-- --------------------必看好房-------------- -->
      
      <div style="width: 85%; margin-left: 30px">
        <el-row>
          <el-col
            :span="8"
            v-for="(house, index) in houses"
            :key="house"
            :offset="index > 0 ? 2 : 2"
          >
            <div @click="itemClick(house.house)">
              <el-card
                style="margin-bottom: 30px"
                :body-style="{ padding: '0px' }"
              >
                <span>
                  <img
                    style="
                      margin-left: 0px;
                      margin-top: 0px;
                      position: absolute;
                      width: 86px;
                      height: 30px;
                      z-index:999;
                    "
                    src="../img/good.png"
                    alt="必看好房"
                  />
                </span>
                <el-image style="height: 160px" :src="house.img" fit="cover" class="image" />
                <!-- </router-link> -->
                <div style="padding: 15px; text-align: left">
                  <span>{{ house.house.htitle }}</span>
                  <div class="bottom clearfix">
                    <p class="address">
                      {{ house.house.hdistrict }}/{{ house.house.htype }}/{{ house.house.harea }}m
                    </p>
                    <!-- -----------------必看好房标签------------- -->

                    <!-- <el-button type="text" class="button"
                            >操作按钮</el-button
                          > -->
                    <p style="text-align: right; color: red" class="price">
                      {{ house.house.hprice }}/月
                    </p>
                  </div>
                </div>
              </el-card>
            </div>
          </el-col>
        </el-row>
      </div>

      <!-- <div style="width: 85%; margin-left: 30px">
        <el-row>
          <el-col
            :span="8"
            v-for="(o, index) in 6"
            :key="o"
            :offset="index > 0 ? 2 : 2"
          >
            <div @click="itemClick">
              <el-card
                style="margin-bottom: 30px"
                :body-style="{ padding: '0px' }"
              >
                <span>
                  <img
                    style="
                      margin-left: 0px;
                      margin-top: 0px;
                      position: absolute;
                      width: 86px;
                      height: 30px;
                    "
                    src="../img/good.png"
                    alt=""
                  />
                </span>
                <img
                  style="height: 160px"
                  src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
                  class="image"
                /> -->
      <!-- </router-link> -->
      <!-- <div style="padding: 15px; text-align: left">
                  <span>百通馨苑一区</span>
                  <div class="bottom clearfix">
                    <p class="address">崂山区/2室1厅/85m</p> -->
      <!-- -----------------必看好房标签------------- -->

      <!-- <el-button type="text" class="button"
                            >操作按钮</el-button
                          > -->
      <!-- <p style="text-align: right; color: red" class="price">
                      2000/月
                    </p>
                  </div>
                </div>
              </el-card>
            </div>
          </el-col>
        </el-row>
      </div> -->
      <!-- -------------------品质租房----------- -->

      <p
        style="
          text-align: left;
          font-size: 36px;
          font-weight: bold;
          padding-left: 10px;
        "
      >
        品质租房
      </p>
      <p
        style="
          font-size: 18px;
          color: gray;
          margin-top: -30px;
          padding-left: 10px;
        "
      >
        <span style="float: right; margin-right: 16%"
          >
        <router-link to="/rentSearch">
          <el-button
            class="zufang"
            type="text"
            style="color: #3072f6; font-weight: bold"
            >更多青岛租房</el-button
          >
          </router-link>
          </span
        >高品质租房体验，从泊寓开始
      </p>

      <br />
      <div style="width: 85%; margin-left: 30px">
        <el-row>
          <el-col
            :span="8"
            v-for="(o, index) in notgood"
            :key="o"
            :offset="index > 0 ? 2 : 2"
          >
            <div @click="itemClick(o.house)">
              <el-card
                style="margin-bottom: 30px"
                :body-style="{ padding: '0px' }"
              >
                <!-- <router-link to="/singleHome"> -->
                <el-image
                  style="height: 160px"
                  :src="o.img"
                  fit="cover"
                  class="image"
                />
                <!-- </router-link> -->
                <div style="padding: 15px; text-align: left">
                  <span>{{o.house.htitle}}</span>
                  <div class="bottom clearfix">
                    <p class="address">{{o.house.hestate}}</p>
                    <!-- -----------------必看好房标签------------- -->

                    <!-- <el-button type="text" class="button"
                            >操作按钮</el-button
                          > -->
                    <p style="text-align: right; color: red" class="price">
                      {{o.house.hprice}}/月
                    </p>
                  </div>
                </div>
              </el-card>
            </div>
          </el-col>
        </el-row>
      </div>
      <!-- ------------------------尾部-------------------- -->
      <br />
      <br />
      <el-footer style="background-color: #f5f5f6; display: flex">
        <div
          style="
            width: 20%;
            height: 90px;
            <!-- border: 1px solid red; -->
            align-self: center;
          "
        >
          <p>
            <a
              style="
                color: #545c64;
                font-size: 26px;
                font-weight: bold;
                text-decoration: none;
              "
              href="#/"
              >泊寓</a
            >
          </p>
        </div>
        <div
          style="
            width: 50%;
            height: 90px;
            <!-- border: 1px solid red; -->
            align-self: center;
            margin-left: 3%;
          "
        >
          <p style="font-size: 13px">
            <img src="../img/pl.png" style="width: 12px" /> 鲁公网安备
            31010402000253号 | 鲁ICP备17003747号
          </p>
        </div>
        <div
          style="
            width: 20%;
            height: 90px;
            <!-- border: 1px solid red; -->
            align-self: center;
            margin-left: 3%;
          "
        >
          <p style="font-size: 14px">
            <i class="el-icon-phone-outline">010-6088-8888</i>
          </p>
        </div>
      </el-footer>
    </div>
  </div>
</template>



<script>
import { getgoodHouse } from "@/network/house";
import { getnotgoodHouse } from "@/network/house"
export default {
  name: "Index",
  created() {
    // queryHouseList().then((res) => {
    //   console.log(res.houses);
    //   this.houses = res.houses;
    //   console.log("this.houses", this.houses);
    // });
    getgoodHouse().then((res) => {
      console.log(res);
      this.houses = res;
    })
    getnotgoodHouse().then(res=>{
      console.log(res)
      this.notgood = res;
    })
  },
  data() {
    return {
      houses: [],
      notgood:[],
      imgList: [
        { url: require("../img/1.jpg") },
        { url: require("../img/2.jpg") },
        { url: require("../img/3.jpg") },
      ],
      // activeIndex: "1",
      // activeIndex2: "1",
      // drawer1: false,
      // drawer2: false,
      input1: "",
      input2: "",
      // input3: "",
      // select: "",
      // currentDate: new Date(),
      target: "",
    };
  },
  methods: {
    itemClick(house) {
      // console.log(house)
      this.$router.push("/singleHome/" + house.hid);
    },
  },
};
</script>

// ------------内页导航-------------------


<style>
.el-header,
.el-footer {
  background-color: #ffffff;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  position: fixed;
  background-color: #dcf5eb;
  color: #333;
  /* text-align: center; */
  height: 100%;
}

.el-main {
  background-color: #fff;
  color: #333;
  /* text-align: center; */
  padding: 0;
}

body > .el-container {
  margin-bottom: 100px;
  position: relative;
}

.el-select .el-input {
  width: 90px;
}
.input-with-select .el-input-group__prepend {
  background-color: rgb(196, 243, 187);
}
.el-input-group {
  width: 85%;
  position: relative;
  padding-bottom: 100px;
}
.el-drawer.ltr {
  height: 550px;
  margin-top: 100px;
  margin-left: 40px;
  border-radius: 10px;
}
.el-carousel__item h3 {
  /* color: #475669; */
  font-size: 18px;
  opacity: 0.75;
  line-height: 00px;
  margin: 0;
}

/* .el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
} */
.search {
  margin-top: 300px;
}

.el-carousel__container {
  height: 450px;
}
.address {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}
.el-col-8 {
  width: 28%;
}
.el-col-offset-2 {
  margin-left: 5%;
}
.el-card {
  border-radius: 7px;
}
</style>